<template>
  <div id="charge">
    <div class="c-box">
      <div style="font-size: 14px">
        <span style="color: #8d8d8d; font-size: 14px"
          >收费管理 / 抄表周期管理 / </span
        >2022年1月抄表明细
      </div>
      <h3>抄表明细</h3>
      <div class="border">
        <div>
          <span class="project"
            >仪表名称
            <el-input v-model="input" placeholder="请输入" />
          </span>
        </div>
        <div style="margin-right: 30px">
          <el-button type="primary" @click="getData()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </div>
      </div>
    </div>

    <div class="c-box2">
      <div class="button">
        <p>费用列表</p>
        <div>
          <el-button>批量操作</el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" prop="id" width="55" />
        <el-table-column prop="room" label="房间号" width="120" />
        <el-table-column prop="meterName" label="仪表名称" width="120" />
        <el-table-column prop="service" label="收费项目" width="120" />
        <el-table-column prop="cycle" label="抄表月份" width="120" />
        <el-table-column prop="startMeter" label="收费起止日期" width="120" />
        <el-table-column prop="cost" label="本期用度" width="120" />
        <el-table-column prop="money" label="费用合计" width="120" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="detail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Page
      :total="total"
      :count="count"
      :currentPage="page"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    ></Page>
    </div>
   

    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" title="抄表详情">
      <el-form :model="form">
        <div>
          <el-form-item label="抄表小区" prop="form.community" :label-width="formLabelWidth">
            
          </el-form-item>
          <el-form-item label="住户姓名" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="住户性别" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="收费项目" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="收费起止日期" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="起始读表" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="本期用度" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="费用合计" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
        </div>
        <div>
          <el-form-item label="房间号" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="住户编号" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="抄表月份" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="终止读表" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
          <el-form-item label="单价" :label-width="formLabelWidth">
            {{}}
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
#charge {
  background: #f0f2f5;
  height: 600px;
  width: 100%;
  /deep/.el-dialog {
    width: 600px;
    .el-form {
      display: flex;
      justify-content: space-between;
    }
  }

  h3 {
    margin: 20px 0;
  }
  .c-box {
    height: 150px;
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;

    border: 1px solid #e9e9e9;
    background-color: #fff;
    .border {
      height: 50px;
      width: 100%;
      border-top: 1px solid #e9e9e9;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;

      .el-input {
        width: 280px;
        margin: -3px 3px 3px 6px;
      }
    }
  }
  .c-box2 {
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;
    border: 1px solid #e9e9e9;
    background-color: #fff;
    .button {
      display: flex;
      justify-content: space-between;
      margin-right: 30px;
      .el-button {
        width: 95px;
        border-radius: 2px;
      }
    }
    .el-table {
      margin-top: 30px;
      .el-button {
        border: 0;
        background: white;
        color: #1890ff;
      }
    }
  }
}
</style>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import Page from "../../components/Page.vue";
import axios from "../../utils/http";
const dialogFormVisible = ref(false);
const formLabelWidth = "100px";
const form = reactive([{
  billId: 0,
  community: "",
  cycle: "",
  endMeter: 0,
  managementName: "",
  phoneNumber: "",
  price: 0,
  room: "",
  serialNo: "",
  service: "",
  startMeter: 0,
  unit: "",
}]);
const input = ref("");
const count = ref(5);
const page = ref(1);
const total = ref(0);
const tableData = ref([]);
const handleEdit = () => {};
const detail=(row:{id:string})=>{
  dialogFormVisible.value = true
  axios({
    url:'/meterDetailsForm/list',
    params:{
      id:row.id
    }
  }).then(({data})=>{
    if(data.code=='0'){
      data.form=data.data;
    }else{
      ElMessage.error('加载失败')
    }
  })
}
const getData = () => {
  axios({
    url: "/meterDetails/list",
    method: "get",
    params: {
      page: page.value,
      limit: count.value,
      meterName: input.value,
    },
  }).then(({ data }) => {
    if (data.code == "0") {
      tableData.value = data.data;
      total.value = data.total;
    } else {
      ElMessage.error("加载失败！");
    }
  });
};
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  console.log(val);
  getData();
};
const reset = () => {
  input.value = "";
  getData();
};
onMounted(() => {
  getData();
});
</script>
